<template>
    <div class="content" >
        <div class="left">
            <ul>
                <li class="beijing" v-for="(item,index) in goods" :key="index">
                    <a class="maodian" :href="'#'+index" >{{item.name}}</a>
                    <div class="xiahuaxian"></div>
                </li>
            </ul>
        </div>
        <div class="right">
            <ol>
                <li class="title" v-for="(item,index) in goods" :key="item.name" >
                    
                    <div class="div1" :id="index">{{item.name}}</div>
                    <ul>
                        <li v-for="food in item.foods" :key="food.name" >
                            <img :src="food.icon" alt="">
                            <div>
                                <p class="p1">{{food.name}}</p>
                                <p class="p2">{{food.description}} </p>
                                <p class="p2">月售1130 好频率100%</p>
                                <p class="p3">￥{{food.price}}</p>
                            </div>
                            <btns :item="food" type="0" ></btns>

                            <p class="hua"></p>
                        </li>
                    </ul>
                    
                </li>
            </ol>
        </div>
    </div>
</template>

<script>
    import { mapActions,mapState } from 'vuex';
    import btns from './btns.vue'
    export default {
        data() {
            return {
                
            }
        },
        created(){
            this.getGoods()
            
        },
        computed:{
            
            ...mapState(["goods"],["carList"],["price"],["show"])
        },
        methods: {
            ...mapActions(["getGoods"]),

            add(food){
                if(!food.count){
                    food.count = 1
                }else{
                    food.count++
                }
                this.$route.commit("setCarList",{
                    item:food
                })
            },
            jian(){
                food.count--
            },


        },
        components:{
            btns
        }

    }
</script>

<style lang="less" scoped>
    .content{
        display: flex;
        overflow: scroll;
        height: 100vh;
        .left{
            width: 80px;
            ul{
                li{
                padding-top: 15px;
                position: relative;
                width: 100%;
                height: 39px;
                text-align: left;
                // padding-left: 10%;
                line-height: 14px;
                background-color: #F3F5F7;
                font-size: 14px;
                .maodian{
                    color: black;
                }
                .xiahuaxian{
                    height: 1px;
                    width: 100%;
                    background-color: #DCDFE2;
                    position: absolute;
                    bottom: 0px;
                    text-align: center;
                }
                
                }
            }
        }
        .right{
            width: 100vh;
            flex: 1;
            overflow: scroll;
            ol{
                li{
                    position: relative;
                    .hua{
                        width: 90%;
                        height: 1px;
                        background-color: #ccc;
                        position: absolute;
                        left: 18px;
                        bottom: 0px;

                    }
                    .div1{
                        background-color: #F3F5F7;
                        border-left: 2px solid #D9DDE1;
                        text-indent: 10px;
                        color: #9CA2A7;
                        height: 25px;
                        width: 100%;
                        font-weight: 600;
                    }
                    ul{
                        li{
                            display: flex;
                            img{
                                width: 60px;
                                height: 60px;
                                margin: 18px 10px 18px 18px;
                            }
                            .p1{
                                margin-top: 18px;
                                font-size: 14px;
                                color: rgb(7,17,27);
                            }
                            .p2{
                                font-size: 12px;
                                color: #ccc;
                            }
                            .p3{
                                color: red;
                                font-weight: 600;
                            }
                            
                        }
                    }
                }
                
            }
        }
    }

</style>